<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>验证用户名</title>
    <script>
      /**
       * 需求：当用户点击了校验按钮，获取输入框中的内容，然后验证其是否合法；
       * 验证的规则是：必须由字母、数字、下划线组成，并且长度是5到12位
       */
        function onclickFun(){
          //1、当我们操作某一个标签的时候，一定要先获取这个标签对象
            var userNameObj = document.getElementById("userName");
            //2、dom对象
            var userNameText = userNameObj.value;
            //3、使用正则表达式验证
            var part = /^\w{5,12}$/;                            //正则表达式
            //4、test（）方法用于测试某个字符串，是不是匹配某一个规则，如果匹配就返回true；否则返回false
            if(part.test(userNameText)){
              alert("用户名合法" + userNameObj.value);
            }
            else {
              alert("警告：用户名不合法");
            }
        }
    </script>
</head>
<body>
    <table>
      <tr>
        <td>用户名：</td>
        <td><input type="text" id="userName" vlaue=""/></td>
        <td><button onclick="onclickFun()">校验</button></td>
      </tr>
    </table>
</body>
</html>